<template>
  <view class="home-container">
    <search placeholder="请输入搜索的类容" @cc="bb"></search>
    <!-- 轮播图 -->
    <swiper autoplay :interval="3000" circular>
      <swiper-item v-for="item in swipers" :key="item.id">
        <image :src="item.img_url" />
      </swiper-item>
    </swiper>

    <!-- 推荐课程 -->
    <view>
      <view class="tips">
        <text>推荐课程</text>
        <image src="/static/images/arrow@2x.png" />
      </view>
      <scroll-view class="course-container" scroll-x>
        <navigator
          class="course-item"
          :url="'/pages/course-detail/index?id=' + item.id"
          v-for="item in course"
          :key="item.id"
        >
          <image :src="item.icon" mode />
        </navigator>
      </scroll-view>
    </view>
    <!-- 热门视频 -->
    <view>
      <view class="tips">
        <text>热门视频</text>
        <image src="/static/images/arrow@2x.png" />
      </view>
      <view class="hot-video">
        <view class="video-item" v-for="item in video" :key="item.id">
          <image :src="item.cover_photo_url" />
          <view>
            <text class="title">{{item.name}}</text>
          </view>
          <view>
            <text class="subtitle">{{item.view_count}}已观看</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../utils/util";
import search from "../comopnents/search-bar";
export default {
  components: { search },
  data() {
    return {
      swipers: [],
      course: [],
      video: [],
    };
  },
  created() {
    this.swipersData();
    this.courseData();
    this.videoData();
  },
  methods: {
    goToSearch() {},
    async swipersData() {
      const res = await request({
        url: "home/swipers",
      });
      console.log(res.data.message);
      this.swipers = res.data.message;
      console.log(this.swipers, 5555);
    },
    async courseData() {
      const res = await request({
        url: "home/course",
      });
      console.log(res.data.message);
      this.course = res.data.message;
    },
    async videoData() {
      const res = await request({
        url: "home/video",
      });
      console.log(res.data.message);
      this.video = res.data.message;
    },
    //搜索组件
    bb(){
      uni.navigateTo({
         url: '/pages/search/index'
      });
    }
  },
};

// import request from '../../utils/request'
// export default {
//   data () {
//     return {
//       swipers: [], // 轮播图
//       courses: [], // 课程
//       videos: [] // 视频
//     }
//   },
//   // uniapp生命周期钩子还是使用小程序的
//   onLoad () {
//     this.getSwiperData()
//     this.getCourseData()
//     this.getVideoData()
//   },
//   methods: {
//     async getSwiperData () {
//       const res = await request({
//         url: 'home/swipers'
//       })

//       this.swipers = res.data.message
//     },
//     async getCourseData () {
//       const res = await request({
//         url: 'home/course'
//       })

//       this.courses = res.data.message
//     },
//     async getVideoData () {
//       const res = await request({
//         url: 'home/video'
//       })

//       this.videos = res.data.message
//     }
//   }
// }
</script>

<style lang="less" scoped>
.home-container {
  padding: 20rpx;
  background-color: #fff;
}
.swiper {
  width: 100%;
  height: 342rpx;
  swiper-item {
    width: 100%;
    height: 100%;
  }
  image {
    width: 100%;
    height: 100%;
  }
}
.tips {
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text {
    font-size: 36rpx;
    font-weight: 700;
    color: #212121;
  }
  image {
    width: 48rpx;
    height: 48rpx;
  }
}
.course-container {
  height: 170rpx;
  white-space: nowrap;
  .course-item {
    width: 296rpx;
    height: 168rpx;
    display: inline-block;
    margin-right: 32rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.hot-video {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  .video-item {
    width: 340rpx;
    image {
      width: 340rpx;
      height: 210rpx;
      border-radius: 12rpx;
    }
    .title {
      margin-top: 15rpx;
      color: #262626;
      font-size: 26rpx;
    }
    .subtitle {
      margin-top: 15rpx;
      margin-bottom: 15rpx;
      color: #959595;
      font-size: 18rpx;
    }
  }
}
</style>
